@import (reference) "~weaver-mobile/dist/weaver-mobile.less";
@import (reference) "./public.less";
// 文档详情页
.wea-doc-whitebg {
  height: 100%;
  width: 100%;
  background: white;
  display: flex;
  flex-direction: column;
  .wea-doc-openattach{
    height: 100%; 
    width: 100%;
    -webkit-overflow-scrolling:touch;
    overflow: auto !important;
  }
      .hidden-header-dramer{
          position: static;
          top: 0 * @hd;
          height: 60 * @hd;
          width: 100%;
          justify-content: center;
          align-items: center;
          border-bottom: 1px solid #E2E2E2;
          .am-drawer-overlay{
            position: static;
          }
          .am-drawer-content{
            position: static;
          }
          &.am-drawer-open.am-drawer.am-drawer-top .am-drawer-sidebar{
            padding-left: 15 * @hd;
            box-shadow: none;
          }
          // 文档标题
          .doc-detail-header{
            display: flex;
            flex-direction: column;
            width: 100%;
            padding-top: 8 * @hd;
            .doc-title { 
              font-size: @font-size-base;
              display: block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space:nowrap;
              margin-right: 40 * @hd;
              &.doc-title-two-icon {
                margin-right: 72 * @hd;
              }
              line-height: 21 * @hd;
              // word-break: break-all;
            }
            .doc-title-img{
              position:absolute;
              top: 0;
              bottom: 0;
              right: 0;
              text-align: center;
              z-index: 1;
              // max-height:100%;
              span {
                display: inline-block;
                color: @color-text-secondary;
                height: 100%;
                .am-icon {
                  padding: @v-spacing-md @h-spacing-md;
                }
                &:last-child {
                  padding-right: @h-spacing-lg;
                }
              }
            }
            // 文档标题下方的信息
            .doc-title-subinfo {
              padding-bottom: @h-spacing-sm;
              display: flex;
              .doc-title-last-modify{
                font-family: PingFangSC-Regular;
                font-size: @font-size-icontext;
                color: #999999;
                letter-spacing: -0.1 * @hd;
                line-height: 18 * @hd;
                margin-top: 5 * @hd;
              }
            }
          }
        
      }
      .hidden-noheader-dramer{
        height: 0;
      }
      .wea-doc-info {
        flex: 1 1;
        top: 60 * @hd;
        bottom: 45 * @hd;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        // width: 100%;
        width: 100%;
        height: 100%;
      .am-wingblank{
        height: 97%;
        // overflow: hidden;
      }
      .am-wingblank-iframe{
        height: 100%;
        width: 100%;
        margin: 0 0;
      }

      // 文档附件样式
      .doc-attach-out-icon {
        background: #9FABB9;
        color: #FFFFFF;
        padding: @v-spacing-sm 12 * @hd;
        border-radius: 100 * @hd;
        position: fixed;
        right: @v-spacing-lg;
        bottom: 70 * @hd;
        .doc-attach-out-icon-size {
          position: relative;
          top: -2 * @hd;
          margin-left: 3 * @hd;
        }
      }
      .doc-content-bg-iframe{
        height: 100%;
        .doc-content-iframe{
          height: 100%;
          * {
            max-width: 100%;
          }
          .wea-doc-single-attach{
            // max-width: 100%;
            // max-height: 99%;
            height: 100%; 
            width: 100%;
            -webkit-overflow-scrolling:touch;
            overflow: auto !important;
          }
        }
      }
      .doc-content-bg{
        height: 100%;
        .doc-content {
          margin-top: @v-spacing-lg;
          max-height: 100%;
          * {
            max-width: 100%;
          }
          .doc-detail-content{
            .doc-detail-content-html{
              * img{
                max-width: 100% !important;
                height: auto !important;
              }
            }
          }
          .wea-doc-error {
            top:0;
            .am-icon-no-data{
              // margin-top: 40%;
            }
          }
        }
      }
      .doc-content-bg-nodata{
        border: none;
      }
    }
    .wea-doc-info-nofooter{
      top:0 * @hd;
      bottom: 0 * @hd;
    }
    .hidden-footer-dramer{
        height: 44 * @hd;
        position: static;
        justify-content: center;
        align-items: center;
        // top:none;
        bottom: 0;
        width: 100%;
        box-shadow: none;
        &.am-drawer-open.am-drawer.am-drawer-bottom .am-drawer-sidebar{
          box-shadow: none;
        }
        .am-drawer-overlay{
          position: static;
        }
        .am-drawer-content{
          position: static;
        }
        
          // 最下方的文档脚部，包括写回复，点赞等。
          .wea-doc-info-footer {
            background: @fill-grey;
            border-top: 1px solid #E2E2E2;
            display: flex;
            height: 44 * @hd;
            // bottom: 0;
            width: 100%;
            // 写回复的白色效果
            .wea-doc-info-footer-reply {
              padding-top: 5 * @hd;
              height: 34 * @hd;
              line-height: 34 * @hd;
              vertical-align: middle;
              display: inline-block;
              flex: 1 1;
              margin-left: @h-spacing-lg;
              margin-right: @h-spacing-lg;
              color: #999999;
            }
          }

    }
    .hidden-nofooter-dramer{
      height: 0;
    }
  .am-drawer-sidebar{
    box-shadow: none;
    -webkit-box-shadow:none;
  }
  
 
  
  
  // 附件列表
  .wea-doc-attach-list {
    height: 100%;
    .am-list-body{
      border-top: none;
      .am-list-item .am-list-line{
        padding-right: 0 * @hd;
      }
    }
    .doc-attach-list {
      height: 100%;
      .doc-attach-item {
        display: flex;
        justify-content: center;
        align-items: center;
        // 附件的图片
        .doc-attach-item-img {
          width: 30*@hd;
          height: 40*@hd;
          margin-left: 12*@hd;
        }
        // 附件的内容
        .doc-attach-item-content {
          flex: 1 1;
          margin-left: 12*@hd;
          margin-right: 8 * @hd;
          .doc-attach-item-title {
            font-size: @font-size-subhead;
            margin-bottom: @v-spacing-md;
            white-space: normal;
            word-wrap: break-word;
            word-break: break-all;
          }
          .doc-attach-item-fileSize {
            font-size: @font-size-caption-sm; 
            color: #999999;
          }
        }
        .doc-attach-item-download{
          height: 40 * @hd;
          width: 50 * @hd;
          text-align: -webkit-center;
        }
      }
      
    }
  }
  //文档日志
  .wea-doc-log-bg{
    .wm-route-layout{
      .wea-doc-log-listview-page{
        height: 100%;
        width: 100%;
        .list-view-section-body{
          .am-list-content{
              padding: 0 0;
              .doc-log-user-item{
                display: flex;
                .user-avatar{
                    width: 45 * @hd;
                    height: 45 * @hd;
                    border-radius: 50%;
                    margin-top: 7 * @hd;
                    margin-left: 16 * @hd;
                    margin-bottom: 8 * @hd;
                  .user-avatar-img {
                    width: 45 * @hd;
                    height: 45 * @hd;
                    // border-radius: 50%;
                  }
                }
                .user-item-info-left {
                  margin-left: 16 * @hd;
                  // margin-bottom: 7 * @hd;
                  width: 100%;
                  .user-item-username {
                    margin-top: 7 * @hd;
                    line-height: 24 * @hd;
                    font-size: @font-size-base;
                    color: #333333;
                    display: block;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    letter-spacing: -0.12 * @hd;
                  }
                  .user-item-data {
                    margin-top: 4 * @hd;
                    line-height: 20 * @hd;
                    font-size: @font-size-icontext;
                    color: #868686;
                    letter-spacing: -0.1 * @hd;
                  }
                  .user-item-status{
                    margin-top: 4 * @hd;
                    margin-left: 4 * @hd;
                    line-height: 20 * @hd;
                    font-size: @font-size-icontext;
                    color: #868686;
                    letter-spacing: -0.1 * @hd;
                  }
                }
            }
            .doc-log-user-item-nodate{
              display: flex;
              .user-avatar{
                  width: 45 * @hd;
                  height: 45 * @hd;
                  border-radius: 50%;
                  margin-top: 7 * @hd;
                  margin-left: 16 * @hd;
                  margin-bottom: 8 * @hd;
                .user-avatar-img {
                  width: 45 * @hd;
                  height: 45 * @hd;
                  // border-radius: 50%;
                }
              }
              .user-item-info-left {
                margin-left: 16 * @hd;
                margin-bottom: 7 * @hd;
                width: 50%;
                .user-item-username {
                  margin-top: 7 * @hd;
                  line-height: 24 * @hd;
                  font-size: @font-size-base;
                  color: #333333;
                  display: block;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  letter-spacing: -0.12 * @hd;
                }
                .user-item-sub {
                  margin-top: 4 * @hd;
                  line-height: 20 * @hd;
                  font-size: @font-size-icontext;
                  color: #868686;
                  letter-spacing: -0.1 * @hd;
                }
              }
              .user-item-info-right {
                margin-left: 15 * @hd;
                margin-bottom: 7 * @hd;
                width: 50%;
                .user-item-job {
                  margin-top: 11 * @hd;
                  font-size: @font-size-base;
                  line-height: 20 * @hd;
                  color: #333333;
                  letter-spacing: -0.1 * @hd;
                }
                .user-item-deptname {
                  font-size: @font-size-icontext;
                  margin-top: 2 * @hd;
                  line-height: 20 * @hd;
                  color: #868686;
                  letter-spacing: -0.1 * @hd;
                }
              }
            }
          }
        }
      }
    }
  }
  //文档属性
  .wea-doc-attribute-bg{
    .wm-route-layout{
      display: flex;
      flex-direction: column;
        .wea-doc-attribute{
          overflow:auto;
          -webkit-overflow-scrolling: touch;
          flex: 1 1;
          height: 100%;
          padding-left: @h-spacing-lg;
        .am-list-content{
          width: 90 * @hd;
          flex: 0 auto;
        }
        .am-list-extra{
          flex: 1 1;
          text-align: left;
          white-space: normal;
          word-wrap: break-word;
          word-break: break-all;
          color: #000;
        }
        
      }
    }
    
    
  }

 
  // 评论列表样式
  .wea-comment-list {
    .wea-comment-item {
      border-bottom: 1px solid #EEE9E9;
      // 评论的头，包括评论人的信息、头像
      .wea-comment-item-header {
        display: flex;
        .wea-comment-item-userimg {
          height: 40 * @hd;
          width: 40 * @hd;
        }
        .wea-comment-item-usercontent {
          flex: 1 1;
          margin-left: @h-spacing-sm;
          .wea-comment-item-username {
            font-size: @font-size-subhead;
          }
          .wea-comment-item-userinfo {
            font-size: @font-size-caption-sm;
            color: #868686;
            margin-top:@v-spacing-sm;
          }
        }
      }
    }
    // 评论的操作栏
    .wea-comment-item-oper {
      font-size: @font-size-caption-sm;
      padding: @v-spacing-md;
      color: #999999;
      border-bottom: 10 *@hd solid #F3F7FE;
    }
    // 评论的回复
    .wea-comment-reply {
      background: #F7F7F7;
      padding: @v-spacing-md @h-spacing-md;
      margin-bottom: @v-spacing-md;
      font-size: @font-size-caption-sm;
      .wea-comment-reply-user {
        color: #3F3F3F;
        a {
          color: @brand-primary;
        }
      }
      .wea-comment-reply-content{
        margin-top:@v-spacing-md;
      }
    }
  }
 
  .ml-sm {
    margin-left: @h-spacing-sm;
  }
  .ml-md {
    margin-left: @h-spacing-md;
  }
  .ml-lg {
    margin-left: @h-spacing-lg;
  }
  
}
 //回复与点赞页面
 .wea-docreply-whitebg{
   .wm-route-layout{
      height: 100%;
      width: 100%;
      background: white;
      display: flex;
      // justyfycontent:space-between;
      flex-direction: column;
      .am-flexbox-item{
        min-width: 0;
        margin-left: 0;
      }
     .wea-docreply-list {
       margin-bottom: 50 * @hd;
       width: 100%; 
       flex: 1 1;
       .wm-comment-nodata .am-result {
         top: 40%;
         margin-top: 0;
         .am-result-message {
           font-size: @font-size-caption-sm;
           line-height: 1;
         }
         .am-icon-no-data {
           height: 55 * @hd;
           width: 55 * @hd;
         }
       }
     }
     .am-list-body{
       border-top: none;
      //  border-bottom: none; 
     }
     .wea-docreply-list.am-list-body{
      border-bottom: none; 
     }
     .wm-comment-content-msg {
       p {
         margin-block-start: 0;
         margin-block-end: 0;
       }
       * {
         max-width: 100%;
       }
     }
     .wea-praise-user-info {
       //这里使用absolute是为了处理点赞后脚部变形问题
       position: absolute;
       top: 44.5 * @hd;
       bottom: 50 * @hd;
       width: 100%;
       flex: 1 1;
       .praise-user-loading{
        position: absolute;
        top: 43%;
        left: 43%;
        display: flex;
        flex-direction:column;
        align-items: center;
        .parise-icon-loading{
          
        }
        .parise-text-loading{
          margin-top:5 * @hd;
        }
       }
        .wea-doc-error{
          top:7%;
          color: #888;
          >div{
            padding-top: 11 * @hd;
          }
        }
        .user-item {
          max-width: 100%;
          display: flex;
          .user-avatar{
              width: 45 * @hd;
              height: 45 * @hd;
              border-radius: 50%;
              margin-top: 7 * @hd;
              margin-left: 16 * @hd;
              margin-bottom: 8 * @hd;
            .user-avatar-img {
              width: 45 * @hd;
              height: 45 * @hd;
              // border-radius: 50%;
            }
          }
          .user-item-info-left {
            margin-left: 16 * @hd;
            margin-bottom: 7 * @hd;
            width: 50%;
            .user-item-username {
              margin-top: 7 * @hd;
              line-height: 24 * @hd;
              font-size: 17 * @hd;
              color: #333333;
              white-space: normal;
              word-wrap: break-word;
              word-break: break-all;
              letter-spacing: -0.12 * @hd;
            }
            .user-item-sub {
              margin-top: 4 * @hd;
              line-height: 20 * @hd;
              font-size: @font-size-base;
              color: #868686;
              letter-spacing: -0.1 * @hd;
              white-space: normal;
              word-wrap: break-word;
              word-break: break-all;
            }
          }
          .user-item-info-right {
            margin-left: 15 * @hd;
            margin-bottom: 7 * @hd;
            width: 50%;
            .user-item-job {
              margin-top: 11 * @hd;
              font-size: @font-size-base;
              line-height: 20 * @hd;
              color: #333333;
              letter-spacing: -0.1 * @hd;
              white-space: normal;
              word-wrap: break-word;
              word-break: break-all;
            }
            .user-item-deptname {
              font-size: @font-size-base;
              margin-top: 2 * @hd;
              line-height: 20 * @hd;
              color: #868686;
              letter-spacing: -0.1 * @hd;
              white-space: normal;
              word-wrap: break-word;
              word-break: break-all;
            }
          }
        }
        .news-line {
          background: #EEE9E9;
          height: @hd;
        }
        .news-line-hide {
          background: #fff;
          height: 0 * @hd;
        }
     }
     .wea-doc-praise-info-footer {
       position: absolute;
       bottom: 0;
       width: 100%;
       height: @tab-bar-height;
       background: @fill-grey;
       border-top: 1px solid #E2E2E2;
       display: flex;
       .wea-doc-info-footer-reply-bg{
          margin-left: @h-spacing-lg;
          margin-right: @h-spacing-lg;
          height: 100%;
          flex: 1 1;
          align-items: center;
          display: flex;
            // 写回复的白色效果
          .wea-doc-info-footer-reply {
            padding-left: @h-spacing-md;
            height: 34 * @hd;
            line-height: 34 * @hd;
            width: 100%;
            display: inline-block;
            background: @fill-base;
            border-radius: @radius-md;
            color: #999999;
            .am-icon {
              position: relative;
              top: @v-spacing-xs;
            }
          }
       }
       
     }
  }

}
// 组件库的代码有问题，临时处理一下 18.10.26
//.wm-reply-wrap {
//  position: fixed;
//  right: 0;
//  left: 0;
//  bottom: 0;
//  background-color: transparent;
//  z-index: 1;
//}

// 脚部右侧的操作栏
.wea-doc-info-footer-oper {
  color: #B2B2B2;
  // margin-right: @h-spacing-lg;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
  .doc-detail-reply{
    width: 45 * @hd;
    height: 30 * @hd;
    display: flex;
    align-items: center;
    .doc-detail-replynum{
      display: block;
    }
  }
  .doc-detail-praise{
    width: 45 * @hd;
    height: 30 * @hd;
    display: flex;
    align-items: center;
    margin-left: @h-spacing-md;
    .doc-praise {
      color: @brand-primary;
    }
  }
  
  .doc-detail-attach{
    width: 45 * @hd;
    height: 30 * @hd;
    display: flex;
    align-items: center;
    text-align: center;
    // margin-left: @h-spacing-md;
  }

  .doc-detail-collect{
    width: 45 * @hd;
    height: 30 * @hd;
    display: flex;
    align-items: center;
    margin-left: @h-spacing-md;
    .doc-collect {
      display: block;
      color: @brand-primary;
    }
  }
  .am-icon:not(.am-icon-reply) {
    display: block;
    position: relative;
    top: -2 * @hd;
  }
}